<template>
    <div>
        <div class="homePage">
            <div class="leftContainer">
                <!-- 首页  左侧  模块 -->
                <!-- 第一块 坐席信息 -->
                <Seatinfor />
                <!-- 荣誉榜 -->
                <HonorList />
                <!-- 绩效之星 -->
                <Achievements />
                <!-- 绩效折线图 -->
                <performance-chart />
                <!-- 结束 -->
            </div>

            <!-- 首页  中间  模块 -->
            <div class="middleContainer">
                <!-- 第一块 公告信息 -->
                <Notice />
                <!-- 工单 -->
                <WorkOrder />
                <!-- KPI指标 -->
                <kpiIndex />
                <!-- 服务质量 -->
                <!-- <service-quality /> -->
                <!-- 通话历史 -->
                <call-history />
                <!-- 学习园地 -->
                <LearningGarden />
                <!-- 结束 -->
            </div>

            <!-- 首页  右侧  模块 -->
            <div class="rightContainer">
                <!-- 第一块 备忘录 -->
                <Memorandum />
                <!-- 备忘录模块 -->

                <!-- 质检趋势 -->
                <quality-testing-echart />
                <!-- 班表 -->
                <Schedule />
            </div>
        </div>
        <!-- //队列 -->
        <div class="footer">
            <Queue />
        </div>
    </div>
</template>
<script>
import Pagination from '@/components/Pagination/Pagination.vue';
import Seatinfor from './seatInfor/Seatinfor'; // 坐席信息模块
import HonorList from './honorList/HonorList';// 荣誉榜
import Notice from './notice/Notice';// 公告
import Memorandum from './memorandum/Memorandum';// 备忘录 Memorandum
import WorkOrder from './workOrder/WorkOrder';// 工单 信息
import LearningGarden from './learningGarden/LearningGarden';//学习园地
import kpiIndex from './KPIindex/kpiIndex';//队列 指标
// import ServiceQuality from './serviceQuality/ServiceQuality';// 服务质量
import CallHistory from './callHistory/CallHistory';//通话历史
import Achievements from './achievements/Achievements';//绩效之心
import PerformanceChart from './performanceChart/PerformanceChart';//绩效折线图
import QualityTestingEchart from './qualityTesting/QualityTestingEchart';//质检趋势
import Queue from './queue/Queue';//队列
import Schedule from './schedule/Schedule';//班表
// import { now } from '../../utils/Date';

export default {
    name: 'Home',
    components: {
        Pagination,
        Seatinfor,
        HonorList,
        Notice,
        Memorandum,
        WorkOrder,
        LearningGarden,
        kpiIndex,
        Schedule,
        Achievements,
        Queue,
        // 'service-quality': ServiceQuality,
        'call-history': CallHistory,
        'quality-testing-echart': QualityTestingEchart,
        'performance-chart': PerformanceChart,
    },
    data() {
        return {

        };
    },
    mounted() {

    },
    methods: {

    },
};
</script>

<style lang="scss" scoped>
/deep/ .el-textarea.is-disabled .el-textarea__inner {
    color: #606266;
}
.text_left {
    color: #409eff;
    cursor: pointer;
    // display: inline-block;
    float: right;
    margin-right: 10px;
}
.pagination {
    margin-top: 20px;
    text-align: right;
}
.homePage {
    height: 100%;
    padding-top: 8px;
    display: flex;
    justify-content: space-between;
    .title {
        color: #333;
        font-size: 16px;
        line-height: 18px;
        margin-bottom: 24px;
        text-align: left;
    }
    .leftContainer,
    .middleContainer,
    .rightContainer {
        float: left;
        height: 100%;
    }

    // 左侧容器样式
    .leftContainer {
        flex: 1;
        min-width: 360px;
        margin-right: 12px;
        > div:first-child {
            margin-top: 0px;
        }
        > div {
            margin-top: 8px;
        }
    }

    // 中间容器样式
    .middleContainer {
        flex: 1.5;
        min-width: 370px;
        margin-right: 12px;
        > div:first-child {
            margin-top: 0px;
        }
        > div {
            margin-top: 8px;
        }
    }

    .rightContainer {
        flex: 1;
        min-width: 300px;
        /* background-color: #fff; */
        height: 98%;
        border-radius: 8px;
        /* padding: 24px 16px; */
        > div:first-child {
            margin-top: 0px;
        }
        > div {
            margin-top: 8px;
        }
    }
}
.footer {
    margin-top: 8px;
}
</style>
